{{#section 'head'}}
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

    <script id="nurseryRhymeTemplate"  type="text/x-handlebars-template">
        Merry had a little <b>\{{animal}}</b>,its <b>\{{bodyPart}}</b>
        was <b>\{{adjective}}</b> as <b>\{{noun}}</b>
    </script>
{{/section}}

<div id="nurseryRhyme">Click a button...</div>
<hr>
<button id="btnNurseryRhyme">Generate nursery rhyme</button>
<button id="btnNurseryRhymeAjax">Generate nursery rhyme from Ajax</button>

{{#section 'jquery'}}
    <script>
        $(document).ready(function(){
            var nurseryRhymeTemplate = Handlebars.compile($('#nurseryRhymeTemplate').html());
            var nurseryRhyme = $('#nurseryRhyme');
            $('#btnNurseryRhyme').on('click', function(e){
                e.preventDefault();
                nurseryRhyme.html(nurseryRhymeTemplate({
                    animal: 'basilisk',
                    bodyPart: 'tail',
                    adjective: 'sharp',
                    noun: 'a needle'
                }))
            })

            $('#btnNurseryRhymeAjax').on('click', function(e){
                e.preventDefault();
                {{!--$.ajax('/data/nursery-rhyme', {
                    success: function(data){
                        nurseryRhyme.html(nurseryRhymeTemplate(data.data))
                    }
                })--}}
                $.getJSON('/data/nursery-rhyme', function(data) {
                    if (data.code == 0) {
                        nurseryRhyme.html(nurseryRhymeTemplate(data.data))
                    }
                })
            })
        })
    </script>
{{/section}}